<template>
  <!-- <div> -->
  <el-dialog title="应用分配" :visible.sync="isShow" width="890px" @open="openCreate" @close="closeDialog"
    :close-on-click-modal="false" center>
    <div v-loading="loading">
      <el-card>
        <div slot="header" class="clearfix">
          <span>用户信息</span>
        </div>
        <div>
          <el-form :model="form" size="mini" label-position="left" ref="form">
            <el-row :gutter="10">
              <el-col :sm="12">
                <el-form-item label="用户编号" prop="ID">
                  <el-input v-model="form.ID" placeholder="" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :sm="12">
                <el-form-item label="用户名称" prop="name">
                  <el-input v-model="form.name" placeholder="" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
      <el-card style="margin:10px 0 0 0;">
        <div slot="header" class="clearfix">
          <span>渠道信息</span>
        </div>
        <div>
          <el-table :data="tlrList" ref="table" border highlight-current-row header-row-class-name="tableHeaderClass"
            style="">
            <el-table-column prop="AppNum" label="应用编号"></el-table-column>
            <el-table-column prop="AppName" label="应用名称"></el-table-column>
            <el-table-column label="登录方式">
              <template slot-scope="scope">
                <el-select v-model="scope.row.LoginMode" placeholder="请选择">
                  <el-option v-for="item in loginModeList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="是否开通">
              <template slot-scope="scope">
                <el-select v-model="scope.row.isOpen" placeholder="请选择">
                  <el-option v-for="item in isOpenList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="isShow = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="queryFunc">确 定</el-button>
    </span>
  </el-dialog>
  <!-- </div> -->
</template>
<script>
  import appQuery from "@/message/shared/appquery";
  import userAppSub from "@/message/userManage/user/userApp/userapp-submit";
  import request from "@/common/utils/request";

  export default {
    props: {
      option: Object
    },
    data() {
      return {
        loginModeList: [{
          value: '1',
          label: '1-密码'
        },
        //  {
        //   value: '2',
        //   label: '2-指纹'
        // }
        ],
        isOpenList: [{
          value: '0',
          label: '0-停用'
        }, {
          value: '1',
          label: '1-启用'
        }],
        form: {
          ID: "",
          name: ""
        },
        loading: false,
        tableData: [],
        userList: [],
        tlrList: [],
        dataMap: {}

      };
    },
    methods: {
      openCreate() {
        if (this.$refs["form"] != undefined) {
        this.$refs["form"].resetFields(); //清楚表单验证
        this.$refs["form"].clearValidate(); //清楚表单验证
      }
      this.$nextTick(()=>{

        this.form.ID = this.option.currentRow.UserNum;
        this.form.name = this.option.currentRow.UserName;
        this.dataProcessing();
      })
      },
      dataProcessing() {
        this.loading = true;
        let resBody = new appQuery();
        resBody.data.UserNum = this.option.currentRow.UserNum;
        request(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode == "000000") {
              this.userList = response.RspInfo.Result || [];
              this.userList.forEach(item => {
                this.dataMap[item.AppNum] = item.LoginMode;
              });
            } else if(response.SYS_HEAD.ReturnCode != "CID001"){
              this.loading = false;
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
            }
          }).then(() => {
            let resBody = new appQuery();
            resBody.data.UserNum = this.$store.getters.UserNum;
            request(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  this.tlrList = response.RspInfo.Result || [];
                  this.tlrList.forEach(item => {
                    if (this.dataMap[item.AppNum]) {
                      item.LoginMode = this.dataMap[item.AppNum];
                      this.$set(item, 'isOpen', "1")
                    } else {
                      this.$set(item, 'isOpen', "0")
                    }
                  });
                  this.loading = false;
                } else {
                  this.loading = false;
                  this.$message({
                    type: "error",
                    message: response.SYS_HEAD.ReturnMessage
                  });
                }
              })
              .catch(error => {
                this.loading = false;
                console.error("查询错误", error);
              });
          })
          .catch(error => {
            this.loading = false;
            console.error("查询错误", error);
          });
      },
      queryFunc() {
        console.log(this.tlrList)
        let resBody = new userAppSub();
        resBody.data.UserNum = this.form.ID;
        let list = [];
        let userNum =this.form.ID;
        this.tlrList.forEach((item) => {
          if (item.isOpen === '1') {
            list.push({
              "UserNum": userNum,
              "AppNum": item.AppNum,
              "LoginMode": item.LoginMode,
              "LoginState": "F",
              "UserChannelStatus": "1"
            });
          }
        })
        resBody.data.UserAppList = list;
        request(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
                this.$message({
                type: "success",
                message: "保存成功!"
              })
              this.isShow = false;
              this.loading = false;
            } else {
              this.loading = false;
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
            }
          })
          .catch(error => {
            this.loading = false;
            console.error("查询错误", error);
          });

      },
      // systemEmit() {
      //   this.$emit("systemEmit");
      // },
      closeDialog() {
        //关闭弹窗清楚表单数据并清楚表单验证
      if (this.$refs["form"] != undefined) {
        this.$refs["form"].resetFields(); //清楚表单验证
        this.$refs["form"].clearValidate(); //清楚表单验证
      }
        this.tableData = [],
          this.userList = [],
          this.tlrList = [],
          this.dataMap = {}
      }
    },
    computed: {
      isShow: {
        get() {
          return this.option.isShow;
        },
        set(value) {
          this.option.isShow = value;
        }
      }
    }
  };

</script>
<style lang="scss" scoped>
  // .selectTree {
  //   min-width: 150px;
  // }

  // .text {
  //   font-size: 14px;
  // }

  // .item {
  //   margin-bottom: 18px;
  // }

  // .dialog-text {
  //   display: inline-block;
  //   width: 100%;
  //   text-align: center;
  //   color: red;
  // }

  // .clearfix:before,
  // .clearfix:after {
  //   display: table;
  //   content: "";
  // }

  .clearfix:after {
    clear: both;
  }

  // .el-card {
  //   width: 100%;
  // }

  // .el-form-item {
  //   margin-left: 30px;
  // }

  // .el-form-item1 {
  //   margin-left: 10px;
  // }

  // .box2-button {
  //   width: 80px;
  // }

  .el-card {
    overflow: inherit;
  }

</style>
